<%--
  Created by IntelliJ IDEA.
  User: 靳光乐
  Date: 2022/11/23
  Time: 18:27
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>车辆详情页</title>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/detail.css">
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/rent.css" />
  <!-- 导入layui的 css js -->
  <link rel="stylesheet" href="${pageContext.request.contextPath}/layui-v2.7.6/layui/css/layui.css">
  <script src="${pageContext.request.contextPath}/bootstrap-3.4.1-dist/js/jquery-3.3.1.min.js"></script>
  <script src="${pageContext.request.contextPath}/layui-v2.7.6/layui/layui.js"></script>
</head>
<body>
<div class="header">
  <div class="inner">
    <div class="logo">
      <img src="${pageContext.request.contextPath}/images/car3.jpg">
    </div>
    <div class="nav" style="margin-left: 20px">

      <ul class="layui-nav" lay-filter="">
        <li class="layui-nav-item"><a href="">首页</a></li>
        <li class="layui-nav-item"><a href="">自驾租车</a></li>
        <li class="layui-nav-item"><a href="">二手车</a></li>
        <li class="layui-nav-item"><a href="">自驾游</a></li>
        <li class="layui-nav-item">
          <a href="javascript:;">车型查询</a>
          <dl class="layui-nav-child"> <!-- 二级菜单 -->
            <dd><a href="">SUV</a></dd>
            <dd><a href="">小汽车</a></dd>
            <dd><a href="">大巴车</a></dd>
            <dd><a href="">更多</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">营业网点</a></li>
        <li class="layui-nav-item"><a href="">精彩活动</a></li>
        <li class="layui-nav-item"><a href="">注册</a></li>
        <li class="layui-nav-item"><a href="">登录</a></li>
      </ul>

    </div>
  </div>
</div>
<script>
  layui.use('element', function(){
    var element = layui.element;

    //…
  });
</script>
<div class="main-box">
  <div class="car-box">
    <div class="car-photo">
      <img src="${pageContext.request.contextPath}/${product.proImg}">
    </div>
    <div class="car-detail">
      <div class="car-info">
        <h1>${product.proName}</h1>
        <label>车辆类型：</label>
        <span>${product.proType}</span>
        <br>
        <label>车辆容量:</label>
        <span>${product.proCapacity}</span>
        <br>
        <label>油箱容量：</label>
        <span>${product.proOilCapacity}</span>
        <br>
        <label>排量：</label>
        <span>${product.proPower}</span>
      </div>
      <div class="hiredate">
        <form>
          取车城市
          <select>
            <option >苏州</option>
            <option >常州</option>
            <option >广州</option>
          </select>
        </form>
        <form>
          还车城市
          <select>
            <option >苏州</option>
            <option >常州</option>
            <option >广州</option>
          </select>
        </form>
        <form>
          取车时间
          <select>
            <option >2022/11/22</option>
            <option >2022/11/23</option>
            <option >2022/11/24</option>
          </select>
        </form>
        <form>
          还车时间
          <select>
            <option >2022/11/22</option>
            <option >2022/11/23</option>
            <option >2022/11/24</option>
          </select>
        </form>
        <a href="" style="text-decoration: none"><input type="button" value="查询" class="carBtn"></a>
      </div>
    </div>
  </div>
  <!-- 查看租车门店 -->
  <div class="car-shop">
    <div class="location">
      <span>查找附近门店：</span>
      <input type="text" placeholder="请输入您的位置！">
      <a href="" style="text-decoration: none"><input type="button" value="查询" class="carBtn"></a>
    </div>
  </div>
  <!-- 剩余车辆 -->
  <form action="${pageContext.request.contextPath}/order" method="post">
  <div class="cars">
    <div class="carleft">
      <input type="hidden" name="proId" value="${product.proId}" />
      <input type="hidden" name="proPrice" value="${product.proPrice}" />
      <img src="${pageContext.request.contextPath}/${product.proImg}">
      <p>
        此车型仅剩1辆
        价格：${product.proPrice}
      </p>
      <br>
      <input type="submit" value="立即预定" class="buy">
    </div>
    <div class="carleft">
      <input type="hidden" name="proId" value="${product.proId}" />
      <input type="hidden" name="proPrice" value="${product.proPrice}" />
      <img src="${pageContext.request.contextPath}/${product.proImg}">
      <p>
        此车型仅剩1辆 价格：${product.proPrice}
      </p>
      <br>
      <input type="submit" value="立即预定" class="buy">
    </div>
    <div class="carleft">
      <input type="hidden" name="proId" value="${product.proId}" />
      <input type="hidden" name="proPrice" value="${product.proPrice}" />
      <img src="${pageContext.request.contextPath}/${product.proImg}">
      <p>
        此车型仅剩1辆 价格：${product.proPrice}
      </p>
      <br>
      <input type="submit" value="立即预定" class="buy">
    </div>
    <div class="carleft">
      <input type="hidden" name="proId" value="${product.proId}" />
      <input type="hidden" name="proPrice" value="${product.proPrice}" />
      <img src="${pageContext.request.contextPath}/${product.proImg}">
      <p>
        此车型仅剩1辆 价格：${product.proPrice}
      </p>
      <br>
     <input type="submit" value="立即预定" class="buy">
    </div>
  </div>
  </form>
</div>
</body>
</html>
